<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>
<!-- 引入jquery -->
<script type="text/javascript" th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
	var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	myChart.showLoading();
	$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
	    myChart.hideLoading();

	    myChart.setOption(option = {
	        tooltip: {
	            trigger: 'item',
	            triggerOn: 'mousemove'
	        },
	        series:[
	            {
	                type: 'tree',

	                data: [data],

	                left: '2%',
	                right: '2%',
	                top: '8%',
	                bottom: '20%',

	                symbol: 'emptyCircle',

	                orient: 'vertical',

	                expandAndCollapse: true,

	                label: {
	                    position: 'top',
	                    rotate: -90,
	                    verticalAlign: 'middle',
	                    align: 'right',
	                    fontSize: 9
	                },

	                leaves: {
	                    label: {
	                        position: 'bottom',
	                        rotate: -90,
	                        verticalAlign: 'middle',
	                        align: 'left'
	                    }
	                },

	                animationDurationUpdate: 750
	            }
	        ]
	    });
	});

	option && myChart.setOption(option);
	
	</script>
</body>
</html>